<template>
    <ContentField>
        <table class="table table-striped table-hover" style="text-align: center;"><!--style表示剧中-->
            <thead>
                <tr>
                    <th>A</th>
                    <th>B</th>
                    <th>对战结果</th>
                    <th>对战时间</th>

                </tr>
            </thead>
            <tbody>
                <tr v-for="record in records" :key="record.record.id"><!--遍历下方的对局记录数组
                    第一个record是前端定义的变量名，指代从后端拿来的一局记录的所有信息，后一个record指代一句记录中封装的record表
                    :key值无实际引用，标示每一个<td>标签的唯一性
                -->
                    <td><!--展示A玩家的头像和用户名-->
                        <img :src="record.a_photo" alt="" class="record-user-photo">
                        &nbsp;
                        <span class="record-user-username">{{ record.a_username }}</span>
                    </td>
                    <td><!--展示B玩家的头像和用户名-->
                        <img :src="record.b_photo" alt="" class="record-user-photo">
                        &nbsp;
                        <span class="record-user-username">{{ record.b_username }}</span>
                    </td>
                    <td>{{ record.result }}</td><!--展示对局结果和对局开始时间-->
                    <td>{{ record.record.createtime }}</td>

                </tr>
            </tbody>
        </table>
        <nav aria-label="..."><!--下面都是抄的分页代码框架-->
        <ul class="pagination" style="float: right;"><!--放到右边-->
            <li class="page-item" @click="click_page(-2)"><!--前一页，参数传-2-->
                <a class="page-link" href="#">前一页</a><!--加上href为了让鼠标变成小手形状-->
            </li>
            <li :class="'page-item ' + page.is_active" v-for="page in pages" :key="page.number" @click="click_page(page.number)"><!--绑定按钮事件，传入页面号-->
                <!--循环展示，:class是因为后面有表达式，注意page-item后面有一个空格，因为这是两个类属性-->
                <a class="page-link" href="#">{{ page.number }}</a>
            </li>
            <li class="page-item" @click="click_page(-1)"><!--后一页，参数传-1-->
                <a class="page-link" href="#">后一页</a>
            </li>
        </ul>
        </nav>
    </ContentField>
</template>

<script>
import ContentField from '../../components/ContentField.vue'//卡片框架
import { useStore } from 'vuex';//取出全局变量
import { ref } from 'vue';//用来定义变量
import $ from 'jquery';//用于像后端发送请求


export default {
    components: {
        ContentField//方便在上面使用
    },
    setup() {
        const store = useStore();//取出全局变量
        let records = ref([]);//用于接受后端传来的对局记录
        let current_page = 1;//记录当前页面
        let total_records = 0;//记录总记录数
        let pages = ref([]);//存分页按钮中的五个页面信息（前2后2）

        const click_page = page => {//绑定选择页码按钮的点击事件函数，传入页码
            if (page === -2) page = current_page - 1;//前一页
            else if (page === -1) page = current_page + 1;//后一页
            let max_pages = parseInt(Math.ceil(total_records / 10));//获取最大页数

            if (page >= 1 && page <= max_pages) {//当前页数合法，就拉取当前页
                pull_page(page);
            }
        }

        const udpate_pages = () => {//更新底部分页的小按钮显示内容
            let max_pages = parseInt(Math.ceil(total_records / 10));//总记录数/每页最多展示记录数（向上取整，得出最大页数）
            let new_pages = [];
            for (let i = current_page - 2; i <= current_page + 2; i ++ ) {//显示当前页，以及当前页的前后两页按钮
                if (i >= 1 && i <= max_pages) {//表示这一页是有数据的
                    new_pages.push({//存入数组，存入这一页的页号，以及现在浏览器是否正在展示这一页，若是，这个按钮要高亮
                        number: i,
                        is_active: i === current_page ? "active" : "",
                    });
                }
            }
            pages.value = new_pages;
        }

        const pull_page = page => {//从后端拉取页面的函数，传入页号参数
            current_page = page;//用参数改当前页变量
            $.ajax({
                url: "http://127.0.0.1:3000/record/getlist/",//请求路径
                data: {
                    page,//出入页面参数
                },
                type: "get",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,//用户登录状态认证
                },
                success(resp) {//成功返回resp
                    records.value = resp.records;//后端存所有满足条件记录的列表，赋值给records数组
                    total_records = resp.records_count;//获取总记录数
                    udpate_pages();//成功获取记录后，需要调用更新页面按钮的函数
                },
                error(resp) {//成功返回resp
                    console.log(resp);
                }
            })
        }
        pull_page(current_page);//自动运行拉取页面的函数，

        return {
            records,

            pages,//返回按钮信息，方便上面调用
            click_page
        }
    }
}
</script>

<style scoped>
img.record-user-photo {
    width: 4vh;/*头像变小一点*/
    border-radius: 50%;/*头像变成圆形*/
}
</style>
